<template>
  <div id="pew">
<<<<<<< HEAD
    <el-menu
      class="el-menu-demo"
      mode="horizontal"
      default-active="1"
      text-color="#303133"
      active-text-color="red"
      :router="false"
    >
      <el-menu-item
        :index="(i + 1).toString()"
        v-for="(v, i) in arr"
        :key="i"
        @click="change(v.table_position)"
        >{{ v.table_position }}</el-menu-item
      >
    </el-menu>
    <ul class="clear table">
      <li
        v-for="(v, i) in sum"
        :key="i"
        :style="
          v.substring(v.length - 2, v.length) == '隐藏'
            ? { color: 'pink', background: 'gray' }
            : { color: 'red', background: '#66CCCC' }
        "
      >
=======
    <el-menu class="el-menu-demo"
             mode="horizontal"
             default-active="1"
             text-color="#303133"
             active-text-color="red"
             :router="false">
      <el-menu-item :index="(i + 1).toString()"
                    v-for="(v, i) in arr"
                    :key="i"
                    @click="change(v.table_position)">{{ v.table_position }}</el-menu-item>
    </el-menu>
    <ul class="clear table">
      <li v-for="(v, i) in sum"
          :key="i"
          :style="
          v.substring(v.length - 2, v.length) == '隐藏'
            ? { color: 'black', background: '#F0F0F0' }
            : { color: 'white', background: '#539DFE' }
        ">
>>>>>>> 4c3059630cb1659c2b780d5d9e45c89416dc5c7c
        {{ v.substring(0, v.length - 2) }}
      </li>
    </ul>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  data () {
    return {
      mum: [],
      status: "A区",
    };
  },
  methods: {
    ...mapActions("coupon", { jia: "table", pless: "tableAll" }),
    change (m) {
      this.status = m;
    },
  },
  computed: {
    arr () {
      return this.$store.state.coupon.table;
    },
    sum () {
      let frist = this.status.substring(0, 1);
      console.log(frist);
      let next = this.$store.state.coupon.tableAll;
      let brr = this.$store.state.coupon.mode;
      var res = next.map((v, i) => {
        return v + brr[i];
      });
      var res = res.filter((v) => {
        if (frist === v.substring(0, 1)) {
          return v;
        }
      });
      return res;
    },
  },
  created () {
    this.jia();
    this.pless();
  },
<<<<<<< HEAD
  mounted() {},
=======
  mounted () { },
>>>>>>> 4c3059630cb1659c2b780d5d9e45c89416dc5c7c
};
</script>
<style lang='less' scoped>
#pew {
  .table {
    li {
      height: 200px;
      line-height: 200px;
      text-align: center;
      margin: 20px 2.5%;
      width: 20%;
      border: 1px solid gray;
      float: left !important;
      border-radius: 20px;
    }
  }
}
.clear::after {
  content: "";
  display: block;
  clear: both;
}
</style>